<template>
  <div class="mylikes">
    <div class="head">
        <div class="qian" @click="$router.go(-1)">
            <svg t="1666842723861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2528" width="200" height="200"><path d="M387.84 164.906667a22.122667 22.122667 0 0 0-0.362667-30.72 20.522667 20.522667 0 0 0-29.674666 0.362666L0 512.853333l357.802667 378.282667c8.042667 8.533333 21.290667 8.746667 29.674666 0.341333 8.32-8.32 8.533333-22.016 0.384-30.72L60.330667 512.853333 387.861333 164.906667z" fill="#3D3D3D" p-id="2529"></path></svg>

        </div>
        全部收藏
        <div class="hou">
            <svg t="1666842886571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3534" width="200" height="200"><path d="M703.722 643.895c36.472-58.77 57.825-129.217 57.825-205.042 0-205.042-155.362-371.317-347.017-371.317-191.655 0-347.017 166.275-347.017 371.317 0 204.998 155.363 371.295 347.017 371.295 101.925 0 193.32-47.34 256.792-122.22l-3.442 4.838 247.657 263.7 40.905-43.808-252.72-268.762zM414.552 747.688c-159.705 0-289.17-138.24-289.17-308.835 0-170.617 129.465-308.858 289.17-308.858 159.683 0 289.192 138.24 289.192 308.857-0.023 170.595-129.51 308.835-289.192 308.835z" p-id="3535"></path></svg>
            <p @click="dels">管理</p>
        </div>
    </div>  
    <div class="goods"  v-for="(item,index) in goodlists" :key="index" >
        <div class="heads" v-if="lists">
            <div class="toux">
                <img :src="item.sptimgs" alt="">
            </div>
            <div class="name">
                {{item.dianpuname}}
            </div>
            <div class="enter">
                <svg t="1666843257656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4437" width="200" height="200"><path d="M857.70558 495.009024 397.943314 27.513634c-7.132444-7.251148-18.794042-7.350408-26.048259-0.216941-7.253194 7.132444-7.350408 18.795065-0.216941 26.048259l446.952518 454.470749L365.856525 960.591855c-7.192819 7.192819-7.192819 18.85544 0 26.048259 3.596921 3.596921 8.311293 5.39487 13.024641 5.39487s9.42772-1.798972 13.024641-5.39487L857.596086 520.949836C864.747973 513.797949 864.796068 502.219239 857.70558 495.009024z" p-id="4438"></path></svg>

            </div>
        </div>    
        <div class="body" >

            <div class="inp" ><input @click="addprice(index)" type="checkbox" :checked="item.checked" ></div>

            <div class="imgs"><img :src="item.sptimgs" alt=""></div>
            <div class="right">
                <div class="top">
                    {{item.titles}}
                </div>
                <div class="chose">
                    请选择款式<svg t="1666843257656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4437" width="200" height="200"><path d="M857.70558 495.009024 397.943314 27.513634c-7.132444-7.251148-18.794042-7.350408-26.048259-0.216941-7.253194 7.132444-7.350408 18.795065-0.216941 26.048259l446.952518 454.470749L365.856525 960.591855c-7.192819 7.192819-7.192819 18.85544 0 26.048259 3.596921 3.596921 8.311293 5.39487 13.024641 5.39487s9.42772-1.798972 13.024641-5.39487L857.596086 520.949836C864.747973 513.797949 864.796068 502.219239 857.70558 495.009024z" p-id="4438"></path></svg>

                </div>
                <div class="price">
                    <p>￥{{item.qianq}} <span>{{item.hou}}</span></p>
                    <div class="svg">
                        <svg t="1666850182206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5351" width="200" height="200"><path d="M288 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="5352" fill="#8a8a8a"></path><path d="M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="5353" fill="#8a8a8a"></path><path d="M736 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="5354" fill="#8a8a8a"></path></svg>

                    </div>
                </div>
            </div>
        </div>
    </div> 
    <div class="dings"></div>
    <div class="bottom" v-if="guanli==true">
        <p>已选择{{howmany}}款</p>
        <div class="right">
            <p>合计：<span>￥{{allprice}}</span></p>
            <div class="give">
                去结算
            </div>
        </div>
    </div> 
    <div class="bottom2" v-if="guanli==false">
        <div class="le">
            <input type="checkbox" @click="allchose" :checked='allchecked'>
            <p >全选</p>
        </div>
        <div class="ri" @click="deldata">
            删除
        </div>
    </div>
  </div>
</template>

<script>
export default {
    props:["homelists"],
    data(){
        return{
            goodlists:[
                // {
                //     touimgs:require("../assets/imgs/头像.jpg"),
                //     name:"港风嘻哈街头情侣装",
                //     bigimgs:require("../assets/imgs/衣服.jpg"),
                //     price:22.5,
                //     things:"短袖超大情侣装纯黑迪迦印花潮流",
                //     yip:20,
                //     id:1
                // },
            ],
            lists:null,
            allprice:0,
            shuliang:0,
            guanli:true,
            allchecked:false,
            howmany:0
        }
    },
    methods:{
        
        allchose(){
            // console.log("mmm")
            this.allchecked=! this.allchecked
            if(this.allchecked==true){
               this.goodlists.forEach(function(item){
                console.log(item.checked);
                 item.checked=true
               })
            }
            if(this.allchecked==false){
               this.goodlists.forEach(function(item){
                console.log(item.checked);
                 item.checked=false
               })
            }
           

        },
        deldata(){
            console.log("del")
            this.goodlists = []
            window.localStorage.removeItem("gooddata")            
        },
        dels(){
            this.guanli=!this.guanli
            // this.allchecked=!this.allchecked
            // if(this.allchecked==true){
            //     this.goodlists.checked=true
            // }else{
            //     this.goodlists.checked=false
            // }
        },
        
        getDataFun(id){
            // this.goodlists.push(this.homelists[parseInt(id)-1]);
            //把本地的数据取出来赋值给temparr
            let temparr = JSON.parse(window.localStorage.getItem("gooddata"))
            //判断temparr有没有值，没有的话让他等于空数组，有的话，让他等于有的值。
            this.goodlists = temparr==null?[]:temparr
            
            //接收到id把id对应的数据放进goodlists
            this.goodlists = [...this.goodlists,this.homelists[parseInt(id)-1]]
            //把goodlists的数据存到本地
            window.localStorage.setItem("gooddata",JSON.stringify(this.goodlists));
            // this.lists=this.homelists[parseInt(id)-1];
            console.log(this.lists)
        },
        addprice(index){
            // console.log(this.prop("checked"));
            this.allchecked=!this.goodlists.some(function(item){
                 return item.checked==false
            })
            console.log(this.goodlists[index].checked)
            this.goodlists[index].checked=!this.goodlists[index].checked
            if(this.goodlists[index].checked==true){
                this.allprice += Number(this.goodlists[index].qianq) 
                this.howmany  +=1
            }else{
                this.allprice -= Number(this.goodlists[index].qianq) 
                this.howmany  -=1
            }
                       
        }
    },
    created(){
        // console.log(this.$route.query.id);
         let temparr = JSON.parse(window.localStorage.getItem("gooddata"))
         this.goodlists = temparr
       if (this.$route.query.id) {
         this.getDataFun(this.$route.query.id);
       }else{
        this.lists=null
       }
       console.log(this.goodlists)
        // console.log(this.overprice)
        // console.log(this.lists.id)
        // console.log(this.goodlists[0].qianq)
        this.goodlists.forEach(function(item){
                // console.log(item.checked);
                 item.checked=false
        })
    },
}
</script>

<style lang="scss">
.mylikes .bottom2{
    width: 100%;
    height: 50px;
    display: flex;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;
    .le{
        width: 70px;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: space-around
    }
    .ri{
        width: 100px;
        height: 40px;
        background-color: red;
        line-height: 40px;
        text-align: center;
        color: #fff;
    }
}
.mylikes .head{
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #dfdfdf;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    .qian{
        width: 35px;
        height: 35px;
        margin-left: 15px;
        svg{
            width: 35px;
            height: 35px;
        }
    }
    .hou{
        width: 80px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        svg{
            width: 25px;
            height: 25px;
        }
        p{
            font-size: 14px;
            color: #474747;
        }
    }
}
.mylikes .goods{
    .heads{
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        .toux{
            width: 25px;
            height: 25px;
            margin-left: 10px;
            img{
                width: 100%;
            }
        }
        .name{
            margin-left: 10px;
            font-size: 12px;
        }
        .enter{
            width: 15px;
            height: 15px;
            margin-left: 10px;
            svg{
                width: 15px;
                height: 15px;

            }
        }
    }
    .body{
        width: 100%;
        display: flex;
        align-items: center;
        .inp{
            width: 30px;
            display: flex;
            justify-content: center;
        }
        .imgs{
            width: 100px;
            height: 100px;
        border-radius: 5px;
        overflow: hidden;
            img{
                width: 100%;
            }
        }
        .right{
            flex: 1;
            height: 120px;
            padding: 12px;
            box-sizing: border-box;
            .top{
                font-size: 14px;
                font-weight: 500;
            }
            .chose{
                margin-top: 5px;
                width: 80px;
                height: 20px;
                font-size: 12px;
                color:#505050;
                border: 1px solid #505050;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                svg{
                    width: 10px;
                    height: 10px;
                }
            }
            .price{
                display: flex;
                margin-top: 16px;
                align-items: center;
                justify-content: space-between;
                p{
                    font-size: 20px;
                    color: red;
                    span{
                        font-size: 12px;
                        color: #c8cac7;
                    }
                }
                .svg{
                    width: 20px;
                    height: 20px;
                    svg{
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }
    }
    border-bottom: 10px solid #dfdfdf;
}
.mylikes .bottom{
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    p{
        height: 60px;
        text-indent: 12px;
        color: #d6d6d6;
        font-size: 12px;
        line-height: 60px;
        margin-right: 10px;
        span{
            color: red;
        }
    }
    .right{
        height: 60px;
        line-height: 60px;
        display: flex;
        p{
            font-size: 14px;
            font-weight: 600;
        }
        .give{
            width: 130px;
            background-color: red;
            height: 60px;
            line-height: 60px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
        }
    }
}
.mylikes .dings{
    width: 100%;
    height: 60px;
}

</style>